.container{
    display: flex;
    // 改变主轴方向：纵轴方向
    flex-direction: column;
    height: 100vh;
    background-color: #f0f2f5;
}

.content-wrapper{
    flex:auto;
    padding: 15px 0;
}

.content {
    margin: 0 24px;
    display: flex;
    height: 100%;

    .left{
        width: 20%;
        height: 100%;
        // min-width: 300px;
        background-color: #fff;
        // padding: 0 20px; // 上下是0  左右是20px
        overflow: hidden;
    }

    .main{
        flex: 1;
        position: relative;
        overflow: hidden;

        // 居中
        .canvas-wrapper{
            position: absolute; // 子绝父相
            width: 45%;
            // width: 400px;
            // min-width: 400px;
            height: 90%; /* 默认高度 */
            max-height: 712px; /* 最大高度 */
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);/* 相对于自身的百分之50 */
            overflow: auto;
            box-shadow: 0 2px 10px #0000001f;
            background-color: #fff;
            padding: 1% 1%;
        }

        /* 滚动条样式 */
        .canvas-wrapper::-webkit-scrollbar {
            width: 4px; /*  设置纵轴（y轴）轴滚动条 */
            height: 4px; /*  设置横轴（x轴）轴滚动条 */
        }
        /* 滚动条滑块（里面小方块） */
        .canvas-wrapper::-webkit-scrollbar-thumb {
            border-radius: 0px;
            background: transparent;
        }
        /* 滚动条轨道 */
        .canvas-wrapper::-webkit-scrollbar-track {
            border-radius: 0;
            background: transparent;
        }

        /* hover时显色 */
        .canvas-wrapper:hover::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
        }
        .canvas-wrapper:hover::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
        }


    }

    .right{
        width: 20%;
        // min-width: 300px;
        background-color: #fff;
        padding: 0 20px;
    }
}